<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css3类似蜂巢网格布局样式代码</title>

<link rel="stylesheet" type="text/css" href="css/hexagons.css">

</head>
<body>
<ul id="hexGrid">
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/1.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/2.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/3.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/4.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/5.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/6.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/7.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/8.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/1.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/2.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/3.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/4.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/5.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/6.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/7.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/8.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/1.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/2.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/3.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/4.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/5.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/6.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/7.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/8.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/1.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/2.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/3.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/4.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/5.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/6.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/7.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
		<li class="hex">
			<a class="hexIn" href="#">
				<img src="img/8.jpg" alt="" />
				<h1>This is a title</h1>
				<p>Some sample text about the article this hexagon leads to</p>
			</a>
		</li>
</ul>


</body>
</html>